<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>chotoday</title>
	<link rel="shortcut icon" title="SELFHTML Icon" type="image/x-icon" href="images/fav.ico" />
	<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/quick_menu.css">
	<link rel="stylesheet" href="css/circle-menu.css">
	<link rel="stylesheet" type="text/css" href="js/animateMenu/css/stimenu.css" />

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/jQueryRotate.2.1.js"></script>
	<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
	<!-- Script Bootrap -->
	<script type="text/javascript" src="libs/bootstrap/js/bootstrap.js"></script>
	<!-- Script Bootrap -->
	<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
	<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.css">
<script type="text/javascript">
	$(function() {
		$('ul#main_menu').lavaLamp({
			autoResize: true,
			startItem : 0,
			autoResize: true
		});

		$("#pre-header-btn").toggle(function(){
			$(this).animate({top: "60px"});
			$("#pre-header-content").animate({top: "0px"});
			$("#btn-updown-pre-header").removeClass("icon-chevron-down").addClass("icon-chevron-up");
		},function(){
			$(this).animate({top: "0px"});
			$("#pre-header-content").animate({top: "-60px"});
			$("#btn-updown-pre-header").removeClass("icon-chevron-up").addClass("icon-chevron-down");
		});		
	});
</script>
</head>
<body>
	<div id="pre-header">
		<div id="pre-header-content">
			<div id="logo-top" style="margin-left: 30px;">
				<img src="images/logo_demo.png" alt="" style="height:40px;"/> 
			</div>
			<div id="pre-header-bar-content">
				<div id="login-top">
					<form class="form-inline">
						<div class="input-prepend">
							<span class="add-on"><i style="color: #666;" class="icon-envelope"></i></span>
							<input class="span2" id="inputIcon" type="text" placeholder="địa chỉ email">
						</div>
						<div class="input-prepend">
							<span class="add-on"><i style="color: #666;" class="icon-key"></i></span>
							<input class="span2" id="inputIcon" type="password" placeholder="mật khẩu">
						</div>
						<label class="checkbox">
							<input type="checkbox"> Ghi nhớ đăng nhập
						</label>
						<button type="submit" class="btn btn-info">Đăng nhập</button>
						<button type="submit" class="btn btn-warning">Đăng ký</button>
						<a href="">Quên mật khẩu?</a>
					</form>

				</div>

				<div id="register-subcribe">
					Đăng ký nhận email thông báo giảm giá <input type="text" class="span5">
				</div>
			</div>
		</div>
		<div id="pre-header-btn">
			Đăng nhập <span class="amp">&amp;</span>đăng ký 
			<i id="btn-updown-pre-header" class="icon-chevron-down"></i>
		</div>
	</div>
	<div id="header">
		<div id="main_nav">
			<div id="logo-top">
				<img src="images/logo_demo.png" alt="" style="height:40px;"/> 
			</div>
			<div id="menu-top">
				<ul id="main_menu">
					<li><a href="#"><div id="menu_home"></div></a></li>
					<li><a href="#"><div id="menu_hotdeal"></div></a></li>
					<li><a href="#"><div id="menu_crazydeal"></div></a></li>
					<li><a href="#"><div id="menu_doanhnghiep"></div></a></li>
				</ul>

			</div>
			<div id="menu_action">
				<h2><i class="icon-map-marker"></i> Hồ Chí Minh</h2>
			</div>
		</div>
	</div>
	<div style="width:100%;height:60px;"> </div>
		<div id="list-animate-catalog">
			<ul id="sti-menu" class="sti-menu">
				<li data-hovercolor="#37c5e9">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Ẩm thực</h2>
						<h3 data-type="sText" class="sti-item">(34)</h3>
						<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
					</a>
				</li>
				<li data-hovercolor="#37c5e9">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Du Lịch</h2>
						<h3 data-type="sText" class="sti-item">(214)</h3>
						<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
					</a>
				</li>
				<li data-hovercolor="#37c5e9">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Thời Trang</h2>
						<h3 data-type="sText" class="sti-item">(334)</h3>
						<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
					</a>
				</li>
				<li data-hovercolor="#37c5e9">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Công Nghệ</h2>
						<h3 data-type="sText" class="sti-item">(34)</h3>
						<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
					</a>
				</li>
				<li data-hovercolor="#37c5e9">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Giải Trí</h2>
						<h3 data-type="sText" class="sti-item">(34)</h3>
						<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
					</a>
				</li>
				<li data-hovercolor="#37c5e9">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Giáo Dục</h2>
						<h3 data-type="sText" class="sti-item">(364)</h3>
						<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
					</a>
				</li>
				<li data-hovercolor="#37c5e9">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Làm Đẹp</h2>
						<h3 data-type="sText" class="sti-item">(324)</h3>
						<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
					</a>
				</li>
				<li data-hovercolor="#37c5e9">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Khác</h2>
						<h3 data-type="sText" class="sti-item">(344)</h3>
						<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
					</a>
				</li>
			</ul>
		</div>
	<!-- BEGIN: #wrap -->
	<div id="wrap">

		<div class="list-sp">
			<div class="sp-demo mL0">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo mL0">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo mL0">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo mL0">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo mL0">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo mL0">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
			<div class="sp-demo">Demo</div>
		</div>
    </div>
    <!-- END: #wrap -->

    <!-- BEGIN: #footer -->
	<div id="footer">
		<div class="container">
			<h1>footer</h1>
		</div>
	</div>
    <!-- END: #footer -->
	<ul class="quick-menu" id="quick-menu">	
		<li>
			<a href="#"> <i class="icon-cog" style="font-size:30px;margin-left:1px;;margin-top:2px;"></i></a>
			<span class="quick-menu-title first-title">Tiện ích</span>
		</li>
		<li>
			<a href="#" alt="Item 1" title="Item 1"><i class="icon-gift"></i></a> 
			<span class="quick-menu-title">Title</span>
		</li>
		<li>
			<a href="#" alt="Item 2" title="Item 2"><i class="icon-user"></i></a>
			<span class="quick-menu-title">Title</span>
		</li>
		<li>
			<a href="#" alt="Item 4" title="Item 4"><i class="icon-map-marker"></i></a>
			<span class="quick-menu-title">Title</span>
		</li>
		<li>
			<a href="#" alt="Item 5" title="Item 5"><i class="icon-shopping-cart"></i></a>
			<span class="quick-menu-title">Title</span>
		</li>
	</ul>
    <script type="text/javascript">
    	$(function(){
    		$('.tooltip').tooltip();
			$('#quick-menu').circleMenu({
				direction:'top-right',
				item_diameter: 40,
				circle_radius: 120,
				open: function(){

				},
				close: function(){

				},
				init: function(){

				}
			});

			$('#quick-menu li').hover(function(){
				$(this).children('.quick-menu-title').fadeIn();
			},function(){
				$(this).children('.quick-menu-title').fadeOut();
			});
    	})
    </script>
		<script type="text/javascript">
			$(function() {
				$('#sti-menu').iconmenu({
					animMouseenter	: {
						'mText' : {speed : 400, easing : 'easeOutExpo', delay : 140, dir : -1},
						'sText' : {speed : 400, easing : 'easeOutExpo', delay : 280, dir : -1},
						'icon'  : {speed : 400, easing : 'easeOutExpo', delay : 0, dir : -1}
					},
					animMouseleave	: {
						'mText' : {speed : 400, easing : 'easeInExpo', delay : 140, dir : -1},
						'sText' : {speed : 400, easing : 'easeInExpo', delay : 0, dir : -1},
						'icon'  : {speed : 400, easing : 'easeInExpo', delay : 280, dir : -1}
					}
				});

				$( '#cd-dropdown' ).dropdown( {
					gutter : 5
				} );

			});
		</script>
	<script type="text/javascript" src="js/jQuery.circleMenu.js"></script>
	<script type="text/javascript" src="js/animateMenu/js/jquery.iconmenu.js"></script>
</body>
</html>